<template>
  <!-- 验收问题分类 -->
  <div>
    <search-form
      :search-config="searchConfig"
      :label-width="150"
      @clear="clearSearch"
      @search="handleSearch"
    />
    <table-box
      ref="acceptanceClassify"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :off-set="-20"
      show-index
      show-selection
      @btnOperate="btnOperate"
      @selection-change="selectionChangeHandle"
    />
    <div>
      <add-classify v-if="showAddPage" ref="addProRecommend" :visible.sync="showAddPage" :detail-data="activedData" @success="refreshTable" />
    </div>
  </div>
</template>

<script>
import { changeStatus } from '@/api/basicData'
import addClassify from './component/addClassify.vue'
export default {
  name: 'AcceptanceClassify',
  components: { addClassify },
  data() {
    return {
      showAddPage: false,
      activedData: {},
      searchConfig: [
        { label: '问题分类', prop: 'problemClass', type: 'text', value: '', placeholder: '' },
        {
          label: '验收类型',
          prop: 'acceptType',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/ACCEPT_TYPE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '责任归属',
          prop: 'configAcceptDutyId',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `${process.env.VUE_APP_BASE_API}/api/v1/configAcceptDuty/page`,
            // paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'belongDuty',
              value: 'id'
            },
            selectData: []
          },
          dialogConfig: {
            title: '责任归属',
            interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configAcceptDuty/page`,
            setting: [{ prop: 'acceptTypeName', title: '验收类型' }, { prop: 'belongDuty', title: '责任归属' }],
            pageFlag: true
          }
        },
        {
          label: '启用状态',
          prop: 'enable',
          type: 'radio',
          value: '1',
          placeholder: '',
          config: {
            selectData: [
              { label: '全部', value: '' },
              { label: '启用', value: '1' },
              { label: '停用', value: '0' }
            ]
          }
        }
      ],
      tableSelected: [],
      otherFilters: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configAcceptProblem/page`,
        hideSearchBar: true,
        // pageSize: 20,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'problemClass',
            label: '问题分类',
            minWidth: 150,
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'acceptType',
            label: '验收类型',
            minWidth: 150,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'ACCEPT_TYPE'
            }
          },
          {
            prop: 'belongDuty',
            label: '责任归属',
            minWidth: 130
          },
          {
            prop: 'enable',
            label: '启用状态',
            minWidth: 170,
            render: (creat, row) => {
              if (row.enable) {
                return <span>启用</span>
              } else {
                return <span>停用</span>
              }
            }
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: 170
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 170
          },
          {
            prop: 'lastUpdateBy',
            label: '修改人',
            minWidth: 170
          },
          {
            prop: 'lastUpdateTime',
            label: '修改时间',
            minWidth: 170
          }
        ],
        btnList: this.isProduction ? null : [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          },
          {
            buttonName: '编辑',
            optCode: 'edit',
            outerFlag: true
          },
          {
            buttonName: '启用',
            optCode: 'enable',
            outerFlag: true
          },
          {
            buttonName: '停用',
            optCode: 'unable',
            outerFlag: true
          }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    // 搜索
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.acceptanceClassify.initTableData()
      })
    },
    // 按钮组
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', false)) {
            return
          }
          this.handleEdit(this.tableSelected)
          break
        case 'unable':
          this.handleChangeStatus(0)
          break
        case 'enable':
          this.handleChangeStatus(1)
          break
        default:
          break
      }
    },
    // 选中行
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    },
    // 新增/编辑
    handleEdit(data) {
      this.activedData = {}
      if (data) {
        if (data.length > 1) {
          this.$message.warning('该操作仅支持单选')
          return
        }
        this.activedData.data = data[0]
        this.activedData.flag = 'edit'
      }
      this.showAddPage = true
    },
    // 详情
    handleDetail(row) {
      this.activedData.data = row
      this.activedData.flag = 'detail'
      this.showAddPage = true
    },
    // 启用:1/停用:0  state停启用状态
    handleChangeStatus(state) {
      if (!this.tableSelected.length) {
        this.$message.warning(`请选择【${state ? '启用' : '停用'}】项`)
        return
      }
      const tmpArr = this.tableSelected.filter(row => row.enable === state)
      if (tmpArr.length > 0) {
        this.$message.warning(`当前所选分类包含${state ? '启用' : '停用'}状态，请勿重复操作`)
        return
      }
      this.$confirm(`此操作将当前所选数据${state ? '启用' : '停用'},是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableSelected.forEach(item => {
          item.enable = state
        })
        changeStatus(this.tableSelected).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '操作成功',
              type: 'success'
            })
            this.refreshTable()
          }
        })
      })
    },
    // 刷新
    refreshTable(isInit) {
      this.$refs.acceptanceClassify.initTableData(isInit ? '' : 'onPage')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
